import Image from "next/image";
import {Dispatch, SetStateAction, useState} from "react";
import clsx from "clsx";
import Button from "@/components/ui/Button/Button";
import styles from "./Header.module.css";

type TypeHeaderProps = {
    setLoginActive: Dispatch<SetStateAction<boolean>>
    setCurrentAuthForm: Dispatch<SetStateAction<string>>,
}

export default function Header({ setLoginActive, setCurrentAuthForm }:TypeHeaderProps) {
    const [isNavbarOpen, setIsNavbarOpen] = useState(false)

    return (
        <header>
            <nav className={styles.navbar}>
                <div className={styles.logoImage}>
                    <Image
                        quality={100}
                        height={80}
                        width={80}
                        src="/ferry-logo.png"
                        loading="lazy"
                        alt=""
                    />
                </div>
                <div
                    className={clsx(styles.navbar__content,
                        {[styles.hideNavbar]: !isNavbarOpen},
                        {[styles.showNavbar]: isNavbarOpen})}>
                    <Button
                        type="button"
                        kind="login"
                        content="Личный кабинет"
                        onClick={() => {
                            setLoginActive(true)
                            setCurrentAuthForm("login")
                        }}
                    >
                    </Button>
                </div>

                <button type="button"
                        className={styles.menuToggle}
                        aria-expanded="false"
                        onClick={() => setIsNavbarOpen(!isNavbarOpen)}
                >
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path fillRule="evenodd" clipRule="evenodd"
                                          d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3
                                        12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75
                                        0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                                    />
                                </svg>
                            </span>
                </button>
            </nav>
        </header>

    )
}